<template>
  <el-dialog :title="!dataForm.id ? '添加' : '编辑'" :close-on-click-modal="false" :visible.sync="visible">
    <el-form :model="dataForm" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="150px">
      <div>
        <el-steps :active="active" align-center finish-status="success">
          <el-step title="基本信息"></el-step>
          <el-step title="拓展信息"></el-step>
        </el-steps>
      </div>

      <div v-if="active == 0">
        <div>
          <el-form-item label="商品平台分类">
            <el-button @click="getCategory()">选择商品类目</el-button>
            <span>此商品对应的类目，分类由平台管理</span>
            <div>
              <el-tag v-for="tagIndex in productClassifyMultipleSelection" :key="tagIndex.name" closable :type="tagIndex.type" @close="productClassifyClose(tagIndex)">
                {{ tagIndex.name }}
              </el-tag>
            </div>
          </el-form-item>
          <el-form-item label="商品店铺分组">
            <el-button @click="getGoodsGroupEvent()">选择商品店铺分组</el-button>
            <span>此商品对应的店铺分组，分类由店铺管理</span>
            <div>
              <el-tag v-for="tagIndex in groupingMultipleSelection" :key="tagIndex.name" closable :type="tagIndex.type" @close="productGroupingClose(tagIndex)">
                {{ tagIndex.name }}
              </el-tag>
            </div>
          </el-form-item>
          <el-form-item label="商品规格">
            <el-radio v-model="radioSpec" label="1">统一规格</el-radio>
            <el-radio v-model="radioSpec" label="2"> 多规格</el-radio>
          </el-form-item>

          <div v-if="radioSpec == 2"></div>

          <el-form-item label="商品条码">
            <el-button @click="relevance">关联单品</el-button>
          </el-form-item>
        </div>

        <div>
          <el-form-item label="商品短标题">
            <el-input maxlength="10" show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="商品名称">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="商家编码">
            <el-input></el-input>
            <span>选填，与商家自由系统对接时需要</span>
          </el-form-item>
          <el-form-item label="商家统一价">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="市场价">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="重量">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="体积">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="商品图片">
            <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="" />
            </el-dialog>
            <span>尺寸建议750x750（正方形模式）或750×1000（长图模式）像素以上，大小2M以下，最多10张
              (可拖拽图片调整显示顺序 )</span>
          </el-form-item>
          <el-form-item label="商品视频">
            <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
              <video v-if="videoUrl" :src="videoUrl" class="avatar" controls="controls"></video>
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <span>上传视频时封面图片尺寸建议与商品图片一致</span>
          </el-form-item>
          <el-form-item label="配送模板">
            <el-input></el-input>
          </el-form-item>
        </div>
      </div>

      <!--拓展信息-->
      <div v-if="active == 1">
        <el-form-item label="商品标签">
          <el-checkbox-group v-model="brandLabel">
            <el-checkbox label="热门"></el-checkbox>
            <el-checkbox label="推荐"></el-checkbox>
            <el-checkbox label="新品"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="初始销量">
          <el-input placeholder="初始销量"></el-input>
        </el-form-item>
        <el-form-item label="商品限购">
          <el-input placeholder="商品限购"></el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input placeholder="排序"></el-input>
          <span class="el-999">数字越大越靠前</span>
        </el-form-item>
        <!-- <el-form-item label="是否开启会员折扣">
          <el-radio-group v-model="is_member">
            <el-radio :label="0">开启</el-radio>
            <el-radio :label="1">关闭</el-radio>
          </el-radio-group>
        </el-form-item>
        <div class="el-999">
          如果不开启会员折扣，该商品则不享受会员等级折扣价
        </div> -->

        <div>商品详情</div>
        <div class="richText"></div>
      </div>

      <!--选择商品类目-->
      <el-dialog title="商品类目" :append-to-body="true" :visible.sync="dialogProductClassify" width="30%">
        <el-table ref="multipleTable" :data="productClassifyTableData" tooltip-effect="dark" style="width: 100%" row-key="id" default-expand-all :tree-props="{children: 'children', hasChildren: 'hasChildren'}" @row-click="rowClick" align="center">
          <el-table-column prop="name" label="分类名称">
          </el-table-column>
          <!-- <el-table-column prop="type" label="分类级别" show-overflow-tooltip>
          </el-table-column> -->
        </el-table>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogProductClassify = false">取 消</el-button>
          <!-- <el-button type="primary" @click="submitProductClassify()"
            >确 定</el-button> -->
        </span>
      </el-dialog>

      <!--选择商品分组-->
      <el-dialog title="商品分组" :append-to-body="true" :visible.sync="dialogProductGrouping" width="30%">
        <el-table ref="multipleTable" :data="productGroupingTableData" tooltip-effect="dark" style="width: 100%" @selection-change="productGroupingSelectionChange">
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column prop="name" label="分类名称" width="120">
          </el-table-column>
          <el-table-column prop="type" label="分类级别" show-overflow-tooltip>
          </el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogProductGrouping = false">取 消</el-button>
          <el-button type="primary" @click="dialogProductGrouping = false">确 定</el-button>
        </span>
      </el-dialog>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">提交</el-button>
      <el-button v-if="active == 0" type="primary" @click="next">下一步</el-button>
      <el-button v-if="active == 1" type="primary" @click="next">上一步</el-button>
    </span>
  </el-dialog>
</template>

<script>
import serviceApione from '@/api/serviceApione.js'
import { treeDataTranslate } from '@/utils'

export default {
  data () {
    return {
      visible: false,
      active: 0, // 步骤初始化
      is_member: 0, // 是否开启会员折扣
      brandLabel: ['热门'], // 商品标签
      dataForm: {
        id: '0'
      },
      dataRule: [], // 提交提示
      dialogImageUrl: '',
      dialogVisible: false,
      videoUrl: '', // 视频地址
      dialogProductClassify: false, // 商品分类弹窗
      dialogProductGrouping: false,
      productClassifyMultipleSelection: [],
      productClassifyTableData: [],
      productGroupingTableData: [], // 商品分组table数据
      groupingMultipleSelection: [], // 选中的商品分组
      radioSpec: '1' // 商品规格
    }
  },

  methods: {
    // 查询所有商品分类
    getCategory () {
      this.dialogProductClassify = true
      serviceApione.getCategory().then(res => {
        if (res.data.code == 200) {
          this.productClassifyTableData = res.data.list
        }
      })
    },
    // 商品分类选中
    rowClick (e) {
      this.dialogProductClassify = false
      this.productClassifyMultipleSelection.push(e)
    },
    // 移除选中的商品分类
    productClassifyClose (tagIndex) {
      this.productClassifyMultipleSelection.splice(
        this.productClassifyMultipleSelection.indexOf(tagIndex),
        1
      )
    },
    // 查询所有商品分组
    getGoodsGroupEvent () {
      this.dialogProductGrouping = true
      serviceApione.getGoodsGroup().then(res => {
        if (res.data.code == 200) {
          this.productGroupingTableData = res.data.list
        }
      })
    },
    relevance () {

    },
    init (id) {
      this.dataForm.id = id || 0
      this.visible = true
      // this.$nextTick(() => {
      //   this.$refs['dataForm'].resetFields()
      // })
    },
    // 步骤
    next () {
      if (this.active++ > 2) this.active = 0
    },
    handleAvatarSuccess (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },

    // 取消
    toggleSelection (rows) {
      this.dialogProductClassify == false
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },

    // 商品分组
    // 选中
    productGroupingSelectionChange (val) {
      this.groupingMultipleSelection = val
    }
  }
}
</script>

<style lang="scss">
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  line-height: 150px;
  text-align: center;
}
.avatar {
  width: 150px;
  height: 150px;
  display: block;
}
.el-999 {
  color: #999999;
}
</style>
